.root {
  --psi-button-size-xs: 22px;
  --psi-button-size-sm: 26px;
  --psi-button-size-md: 28px;
  --psi-button-size-lg: 32px;
  --psi-button-size-xl: 40px;

  --psi-icon-size-xs: 12px;
  --psi-icon-size-sm: 15px;
  --psi-icon-size-md: 17px;
  --psi-icon-size-lg: 19px;
  --psi-icon-size-xl: 21px;

  --psi-button-size: var(--psi-button-size-sm);
  --psi-icon-size: var(--psi-icon-size-sm);
}

.input {
  position: relative;
  overflow: hidden;
}

.innerInput {
  font-family: var(--mantine-font-family);
  background-color: transparent;
  border: 0;
  padding-inline-end: var(--input-padding-inline-end);
  padding-inline-start: var(--input-padding-inline-start);
  position: absolute;
  inset: 0;
  outline: 0;
  font-size: inherit;
  line-height: var(--mantine-line-height);
  height: 100%;
  width: 100%;
  color: inherit;

  .input[data-disabled] &,
  &:disabled {
    cursor: not-allowed;
  }

  &::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

  &::-ms-reveal {
    display: none;
  }
}

.visibilityToggle {
  width: var(--psi-button-size);
  height: var(--psi-button-size);
  min-width: var(--psi-button-size);
  min-height: var(--psi-button-size);

  &:disabled {
    display: none;
  }
}
